<script setup>
import MoniterItem from "@/views/populationInformation/components/MoniterItem.vue";
import * as echarts from "echarts";
import kuang from "@/assets/136.png"
import {inject, onMounted, ref} from "vue";

const $axios = inject("$axios");
let ageNum = ref({
  age0:0,
  age20:0,
  age40:0,
  age60:0,
})
function personStruct() {
  $axios.get("person_info/personStruct").then(res => {
    console.log('personStruct', res)
    let sex = res.data.data['性别'];
    let nation = res.data.data['民族'];
    let age = res.data.data['年龄'];
    console.log('11111111111111---------------------------')
    console.log(sex)
    console.log(nation)
    console.log(age)
    var ageBar = document.getElementById("ageBar");
    var myChart3 = echarts.init(ageBar, null, {
      renderer: "canvas",
      useDirtyRect: false,
    });
    var option3;
    age.forEach(item => {
      if (item.text.indexOf('0-20')!=-1){
        ageNum.value.age0 = item.num;
      }else if (item.text.indexOf('20-40')!=-1){
        ageNum.value.age20 = item.num;
      }else if (item.text.indexOf('40-60')!=-1){
        ageNum.value.age40 = item.num;
      }else{
        ageNum.value.age60 = item.num;
      }
    })
    option3 = {
      title: {
        text: '年龄',
        textStyle: {
          color: "#FFFFFF",
        },
        left: 'center'
      },
      grid: { // 让图表占满容器
        top: "1%",
        left: "1%",
        right: "1%",
        bottom: "1%"
      },
      series: [
        {
          name: '年龄',
          type: 'pie',
          radius: ['30%', '75%'],
          label: {
            show: true,
            position: 'inside',
            formatter:'{d}%',
            color:'#fff'
          },
          data: age.map(item => {
            return {value: item.num, name: item.text}
          }),
          itemStyle: {
            normal: {
              color: function (data) {
                console.log('--------------')
                console.log(data)
                var color = '#2FD5A4';
                if (data.name.indexOf('0-20')!=-1){
                  color = '#A1A4FD';
                }else if (data.name.indexOf('20-40')!=-1){
                  color = '#FCB674';
                }else if (data.name.indexOf('40-60')!=-1){
                  color = '#76DFFC';
                }
                return color;
              }
            },
          }
        }
      ]
    };
    if (option3 && typeof option3 === "object") {
      myChart3.setOption(option3);
    }
  /*  window.addEventListener("resize", myChart1.resize);
    window.addEventListener("resize", myChart2.resize);*/
    window.addEventListener("resize", myChart3.resize);
  })
}

onMounted(() => {
  personStruct();

});
</script>

<template>
  <MoniterItem img="3" class="feature" title="人口特征结构">
    <template #content>
      <div class="features-main">
<!--        <div class="main-row">
          <div class="main-item" style="width: 60%;" id="sexBar"></div>
          <div class="main-item" style="width: 40%;" id="nationBar"></div>
        </div>-->
        <div class="main-row">
          <div class="main-item" style="width: 35%;">
            <div class="age-main"  style="justify-content: right;">
              <div class="age-img" :style="{backgroundImage:'url('+kuang+')'}">
                <div class="age-text-one">0-20岁</div>
                <div class="age-text-two" style="color: #A1A4FD">{{ageNum.age0}} <span style="font-size: 12px;">项</span></div>
              </div>
            </div>
            <div class="age-main"  style="justify-content: right;">
              <div class="age-img" :style="{backgroundImage:'url('+kuang+')'}">
                <div class="age-text-one">40-60岁</div>
                <div class="age-text-two" style="color: #76DFFC">{{ageNum.age40}} <span style="font-size: 12px;color: #FFFFFF">项</span></div>
              </div>
            </div>
          </div>
          <div class="main-item" style="width: 30%;" id="ageBar"></div>
          <div class="main-item" style="width: 35%;">
            <div class="age-main" style="justify-content: left;">
              <div class="age-img" :style="{backgroundImage:'url('+kuang+')'}">
                <div class="age-text-one">20-40岁</div>
                <div class="age-text-two" style="color: #FCB674">{{ageNum.age20}} <span style="font-size: 12px;color: #FFFFFF">项</span></div>
              </div>
            </div>
            <div class="age-main"  style="justify-content: left;">
              <div class="age-img" :style="{backgroundImage:'url('+kuang+')'}">
                <div class="age-text-one">60岁以上</div>
                <div class="age-text-two" style="color: #2FD5A4">{{ageNum.age60}} <span style="font-size: 12px;color: #FFFFFF">项</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.feature{
  height: 255px;
  background-image: url('../img/bootom_card.png') !important;
}
.features-main {
  height: 100%;

  .main-row {
    height: 100%;
    display: flex;

    .age-main {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      .age-img{
        width: 65px;
        height: 74px;
        padding: 5px;
        text-align: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        div{
          height: 32px;
          line-height: 32px;
        }
        .age-text-one{
          font-size: 14px;
          font-weight: 500;
          color: #FFFFFF;
        }
        .age-text-two{
          font-size: 18px;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
